<template>
  <div class="menu">
    <el-aside width="200px">
      <el-menu
        router
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#2578b5"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <!-- 顶级菜单项 -->
        <template v-for="item in filteredMenus">
          <!-- 子菜单 -->
          <el-submenu
            v-if="!item.hidden && hasPermission(item) && item.children && item.children.length > 0"
            :key="item.path"
            :index="item.path"
          >
            <template #title>
              <i :class="item.iconClass"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group v-for="(child, childIndex) in item.children" :key="childIndex">
              <el-menu-item :index="child.path">
                <i :class="child.iconClass"></i>
                {{ child.name }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <!-- 顶级菜单项（无子菜单） -->
          <el-menu-item
            v-else-if="!item.hidden && hasPermission(item)"
            :key="item.path"
            :index="item.path"
          >
            <i :class="item.iconClass"></i>
            {{ item.name }}
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
  </div>
</template>
<script>
export default {
  name: 'MainMenu',
  data() {
    return {
      menus: [],
      userRole: '', // 统一变量名为 userRole
    }
  },
  computed: {
    filteredMenus() {
      return this.menus.filter(item => {
        if (item.hidden) return false;
        const hasParentPerm = this.hasPermission(item);

        // 处理子菜单过滤并返回新对象避免修改原数据
        let validChildren = [];
        if (item.children) {
          validChildren = item.children.filter(
            child => !child.hidden && this.hasPermission(child)
          );
        }

        // 只有父级有权限且存在有效子菜单时才保留该菜单项
        const hasChildPerm = validChildren.length > 0 || !item.children;

        return hasParentPerm && hasChildPerm;
      }).map(item => {
        // 返回一个新的对象以避免修改原始路由配置
        return {
          ...item,
          children: item.children ? item.children.filter(
            child => !child.hidden && this.hasPermission(child)
          ) : []
        };
      });
    }
  },
  created() {
    this.menus = [...this.$router.options.routes];
    this.getUserRole();
  },
  methods: {
    hasPermission(menuItem) {
      if (!menuItem.roles || menuItem.roles.length === 0) return true;
      return menuItem.roles.includes(this.userRole);
    },
    getUserRole() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
      this.userRole = userInfo.role || '';
      console.log('当前登录角色: ', this.userRole);
    }
  },
  watch: {
    '$route'() {
      this.getUserRole();
      this.menus = [...this.$router.options.routes];
    }
  }
}
</script>
<style lang="scss">
.menu {
    .el-aside {
        height: 100%;
        .el-menu {
            height: 100%;
            .fa {
                margin-right: 10px;
            }
        }
        .el-submenu .el-menu-item {
            min-width: 0;
        }
    }
}
</style>